<template>
  <div>
    <Dialog
      :show="dialogConfig.show"
      :title="dialogConfig.title"
      :buttons="dialogConfig.buttons"
      width="600px"
      :showCancel="showCancel"
      @close="dialogConfig.show = false"
    >
      <el-form
        :model="formData"
        :rules="rules"
        ref="formDataRef"
        label-width="100px"
        @submit.prevent
      >
        <el-form-item label="文件"> {{ formData.fileName }} </el-form-item>
        <template v-if="showType == 0">
          <el-form-item label="有效期" prop="validType">
            <el-radio-group v-model="formData.validType">
              <el-radio :label="0">1天</el-radio>
              <el-radio :label="1">7天</el-radio>
              <el-radio :label="2">30天</el-radio>
              <el-radio :label="3">永久有效</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="提取码" prop="isPasswordProtected">
            <el-radio-group v-model="formData.isPasswordProtected">
              <el-radio :label="0">定义提取码</el-radio>
              <el-radio :label="1">无需提取码</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="sharePassword" v-if="formData.isPasswordProtected == 0">
            <el-input
              clearable
              placeholder="请输入4位提取码"
              v-model.trim="formData.sharePassword"
              maxLength="4"
              :style="{ width: '130px' }"
            ></el-input>
          </el-form-item>
        </template>
        <template v-else>
          <el-form-item label="分享链接" prop="validType">
            {{ shareUrl }}{{ responseData.shareLink}}
          </el-form-item>
          <el-form-item label="提取码" prop="validType">
            {{ responseData.sharePassword }}
          </el-form-item>
          <el-form-item prop="validType">
            <el-button type="primary" @click="copy">复制链接极提取码</el-button>
          </el-form-item>
        </template>
      </el-form>
    </Dialog>
  </div>
</template>

<script setup>
import http from "@/utils/http.js";

import useClipboard from "vue-clipboard3";
const { toClipboard } = useClipboard();
import { ref, getCurrentInstance, nextTick } from "vue";
import { useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const router = useRouter();

const shareUrl = ref(document.location.origin + "/#/shareCheck/");

const showType = ref(0);
const formData = ref({});
const formDataRef = ref();
const rules = {
  validType: [{ required: true, message: "请选择有效期" }],
  isPasswordProtected: [{ required: true, message: "请选择提取码类型" }],
  sharePassword: [
    { required: true, message: "请输入提取码" },
    { min: 4, message: "提取码最少4位" },
    { max: 4, message: "提取码最多4位" },
  ],
};

const showCancel = ref(true);
const dialogConfig = ref({
  show: false,
  title: "分享",
  buttons: [
    {
      type: "primary",
      text: "确定",
      click: (e) => {
        share();
      },
    },
  ],
});

const resultInfo = ref({});
//响应数据
const responseData = ref({
  shareLink: "",
  sharePassword: "",
});
const share = async () => {
  
  if (Object.keys(resultInfo.value).length > 0) {
    dialogConfig.value.show = false;
    return;
  }
  formDataRef.value.validate(async (valid) => {
    if (!valid) {
      return;
    }
    let params = {};
    Object.assign(params, formData.value);
    
    const result = await http.post(
      '/shares/create',
      formData.value
    )

    if (result.code == 411) {
      proxy.Message.warning(result.msg);
      dialogConfig.value.show = false;
      return;
    }

    responseData.value = result.data;
    

    showType.value = 1;
    resultInfo.value = result.data;
    dialogConfig.value.buttons[0].text = "确定";
    showCancel.value = false;
  });
};

const show = (data) => {
  showCancel.value = true;
  dialogConfig.value.show = true;
  showType.value = 0;
  resultInfo.value = {};
  nextTick(() => {
    formDataRef.value.resetFields();
    formData.value = Object.assign({}, data);
  });
};

defineExpose({ show });

const copy = async () => {
  await toClipboard(
    `链接: ${shareUrl.value}${responseData.value.shareLink} 提取码: ${responseData.value.sharePassword}`
  );
  proxy.Message.success("复制成功");
};
</script>

<style lang="scss" scoped>
</style>
